<style>
    .control-label span {
        color: red;
    }
</style>

<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <header class="panel-heading">
                基本信息
            </header>
            <div class="panel-body">
                <form class="form-horizontal tasi-form layui-form" method="get">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">头像</label>
                        <div class="col-sm-10">
                            <img id="Icon" src="{$Icon}" alt="icon" height="100" style="border-radius: 10px;">
                            <input type="file" id="OpenFile" style="display: none" accept=".jpg,.jpeg,.png,.bmp">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名<span>*</span></label>
                        <div class="col-sm-10">
                            <input name="Nick" type="text" class="form-control" value="{$Nick}" required lay-verify="required" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性別</label>
                        <div class="col-sm-10">
                            <select name="Sex" class="form-control m-bot15" style="border: 1px solid #e2e2e4;box-shadow: none;color: #c2c2c2;">
                                <?php
                                for($i=0; $i<3; $i++){
                                    $OptionName = '请选择';
                                    if($i == 1) $OptionName='男';
                                    else if($i == 2) $OptionName='女';
                                    $OptionStatus = '';
                                    if($i==$Sex){
                                        $OptionStatus = 'selected';
                                    }
                                    echo "<option value='$i' $OptionStatus > $OptionName </option>";
                                }
                                ?>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">微信</label>
                        <div class="col-sm-10">
                            <input name="WeChat" type="text" class="form-control" value="{$WeChat}" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">QQ</label>
                        <div class="col-sm-10">
                            <input name="QQ" type="text" class="form-control" value="{$QQ}" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">电话号码<span>*</span></label>
                        <div class="col-sm-8">
                            <input id="Phone" name="Phone" type="tel" class="form-control" value="{$Phone}" required lay-verify="required">
                        </div>
                        <div class="col-sm-2">
                            <button id="GetSMSCode" class="btn btn-warning"  style="width: 100%">获取验证码</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">短信验证码<span>*</span></label>
                        <div class="col-sm-10">
                            <input name="SMSCode" type="email" class="form-control" value="" required lay-verify="required">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">电子邮箱</label>
                        <div class="col-sm-8">
                            <input name="Email" type="email" class="form-control" value="{$Email}" >
                        </div>
                        <div class="col-sm-2">
                            <button id="GetEmailCode" class="btn btn-warning" style="width: 100%">获取验证码</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">电邮验证码</label>
                        <div class="col-sm-10">
                            <input name="EmailCode" type="email" class="form-control" value="" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <textarea id="Remark" class="form-control">{$Remark}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"></label>
                        <div class="col-sm-10">
                            <button class="btn btn-primary" lay-submit lay-filter="formSubmit">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </div>
</div>

<script>
    layui.use(['form','jquery'], function () {
        var form = layui.form,
            $ = layui.jquery;

        //选择头像图片点击，
        $('#Icon').bind('click', function () {
            $('#OpenFile').click();
        });

        //打开选择头像对话框
        $("#OpenFile").change(function () {
            var obj = this.files;
            var abn = obj[0].name;

            var formData = new FormData();
            formData.append('Image', obj[0]);

            $.ajax({
                type: "POST",
                url: "/index.php/index/Common/UploadImage",  //上傳接口
                dataType: "json",
                data: formData,
                // 不处理发送的数据
                processData: false,
                // 不设置Content-Type请求头
                contentType: false,
                async: true,
                success: function (msg) {
                    //上传
                    if (msg['code'] == ErrCode_Normal) {
                        $("#Icon").attr('src',msg['data']['src']);
                        return false;
                    } else mb_OnMessage(msg);
                },
                complete: function () {
                }
            });
        })

        //提交表单
        form.on('submit(formSubmit)', function (data) {
            var fields = data.field;
            fields.Icon = $("#Icon")[0].src;

            if(fields.Email != '' && fields.Email == '') {
                layer.msg('请输入电邮验证码');
                return false;
            }

            global.post('/index.php/user/Setting/mb_SubmitUserInfo', fields, function (msg) {
                if (msg['code'] == ErrCode_Normal) {
                    layer.msg(msg['msg'], {
                        offset: '15px'
                        , icon: 1
                        , time: 1000
                    }, function () {
                        window.location.reload();
                    });
                } else mb_OnMessage(msg);
            });
            return false;
        });

        //获取短信验证码按钮按下
        $('#GetSMSCode').bind('click',function () {
            mb_GetCode('Phone','GetSMSCode');
        });

        //获取电邮验证码按钮按下
        $('#GetEmailCode').bind('click',function () {
            mb_GetCode('Email','GetEmailCode');
        });

    });


    function mb_GetCode(DomID, GetBtnID) {
        $('#'+DomID).attr('disabled', 'disabled');
        $('#'+GetBtnID).attr('disabled', 'disabled');

        var second = 5;
        $('#'+GetBtnID).text(second + 's');
        var int = setInterval(function () {
            $('#'+GetBtnID).text((--second) + 's');
            if(second == 0){
                $('#'+GetBtnID).text('获取验证码');
                $("#"+GetBtnID).removeAttr("disabled");
                $("#"+DomID).removeAttr("disabled");
                window.clearInterval(int);
            }
        }, 1000);
    }
</script>